// redux练习

// 需求:  redux数据 : {c: 8, msg: '123'} , 一个递增,一个递减

// 1.引入createStore
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'

// 2. 定义reducer
function reducer(state = { c: 8, msg: '123' }, action) {
  switch (action.type) {
    case 'inc':
      // action.num 不为undefined时使用action.num
      // action.num 为undefined的时候使用1
      const value = action.num !== undefined ? action.num : 1
      return {
        ...state,
        c: state.c + value,
      }

    case 'dec':
      return {
        ...state,
        c: state.c - 1,
      }

    default:
      return state
  }
}

// 3. 创建store
const store = createStore(reducer, applyMiddleware(thunk))

// 监听redux数据变化
store.subscribe(() => {
  console.log(store.getState())
})

// 递增
// store.dispatch({ type: 'inc', num: 2 })
// store.dispatch({ type: 'inc', num: 3 })
// store.dispatch({ type: 'inc', num: 0})

// // 递减
// store.dispatch({ type: 'dec' })

// 异步操作
// 需求: 执行了store.dispatch之后,过2s再递增
// 注意: redux默认请求情况下,无法实现异步操作,所以如果实际需求中,确实有异步操作,可以使用redux-thunk

// redux-thunk是属于redux的中间件

// 正常情况下:  store.dispatch ----> reducer函数执行

// 使用了中间件: store.dispatch --->中间件函数 ---> 中间件函数 --> reducer函数执行

// redux-thunk的使用步骤:
// 1. 下载redux-thunk  npm i redux-thunk /  yarn add redux-thunk
// 2. 从redux包中,导出applyMiddleWare这个函数
// 3. 引入redux-thunk   import thunk from 'redux-thunk'
// 4. 在createStore的reducer参数后面,使用applyMiddleware,调用这个函数时,传入thunk
// createStore(reducer, applyMiddleware(thunk,其他中间件, 其他中间件))
// 5. 调用store.dispatch((dispatch)=>{
//            执行异步操作,异步操作成功之后,再调用接收到的dispatch
//        })
store.dispatch((dispatch) => {
  setTimeout(() => {
    dispatch({ type: 'inc', num: 8 })
  }, 2000)
})
